<template>
  <div class="main">

    <div class="shadow"></div>


    <div class="box">

      <div class="boxitem">
        <div class="iconbox">
          <img src="../../../assets/image/paysafe/alipay.png" alt="">
          <span>支付宝绑定</span>
        </div>

        <div class="msgbox">
          <div class="text1">未绑定支付宝</div>
          <div class="text2">绑定支付宝用于账户余额提现</div>
          <div class="button" @click="tobind(1)">立即绑定</div>
        </div>
      </div>

      <div class="boxitem">
        <div class="iconbox">
          <img src="../../../assets/image/paysafe/paykey.png" alt="">
          <span>支付密码</span>
        </div>

        <div class="msgbox">
          <div class="text1">未设置支付密码</div>
          <div class="text2">您还未设置支付密码，支付密码用于验证余额提现、订单俞颇支付等相关余额支付的安全验证。</div>
          <div class="button" @click="tobind(2)">设置密码</div>
        </div>
      </div>
      
    </div>

  </div>
</template>

<script>
export default {
  created () {},
  data() {
    return {
      
    }
  },
  methods: {
    tobind(type){
      this.$router.push(`/bind?type=${type}`)
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #FFFFFF;
  .shadow{
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg,#FFFFFF , #F5F5F5);
  }
  .box{
    padding: 0rem 0.2rem;
    width: calc(100% - 0.4rem);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .boxitem:first-child{
      margin-top: 0;
    }
    .boxitem{
      margin-top: 0.2rem;
      padding: 0rem 0.2rem;
      width: calc(100% - 0.4rem);
      height: 2.3rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .iconbox{
        width: 100%;
        height: 0.68rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.2rem;
        font-weight: bold;
        color: #000000;
        img{
          width: 0.28rem;
          height: 0.28rem;
          margin-right: 0.05rem;
        }
      }
      .msgbox{
        padding-left: 0.23rem;
        width: calc(100% - 0.23rem);
        height: 1.62rem;
        background: #F4F9FF;
        border-radius: 0.1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        color: #000000;
        .text1{
          width: 100%;
          font-size: 0.2rem;
          font-weight: bold;
        }
        .text2{
          font-size: 0.14rem;
        }
        .button{
          width: 0.76rem;
          height: 0.28rem;
          line-height: 0.28rem;
          text-align: center;
          border-radius: 0.2rem;
          background: #FFFFFF;
          border: 0.01rem solid #E8E8E8;
          font-size: 0.12rem;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
